<template>
    <div class="">
    <el-menu
      default-active="0"
      class="el-menu-vertical-demo"
      background-color="#424242"
      text-color="#fff"
      active-text-color="#ffd04b">
      <!-- <el-menu-item index="1" @click="handclick" :disabled="datasting">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">播放</span>
          <el-button type="success" plain>播放</el-button>
        </div>
      </el-menu-item> -->
      <div class="animate__animated animate__backInLeft">
      <el-submenu index="1">
        <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>设备一</span>
        </template>
        <el-menu-item-group>
      <el-menu-item index="1-1" @click="handclicksapn" :disabled="datasting">
          <span slot="title">播放时间设置</span>
      </el-menu-item>
      <el-menu-item index="1-2" @click="handvideoplayerlist" :disabled="datasting">
          <span slot="title">播放切换设置</span>
      </el-menu-item>
      </el-menu-item-group>
      </el-submenu>
      </div>
      <div class="animate__animated animate__backInLeft">
      <el-submenu index="2">
        <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span>设备二</span>
        </template>
        <el-menu-item-group>
      <el-menu-item index="2-1" @click="handEquipmentlist">
          <span slot="title">播放时间设置</span>
      </el-menu-item>
      <el-menu-item index="2-2" @click="handEquipmentmiddlle">
          <span slot="title">播放切换设置</span>
      </el-menu-item>
      </el-menu-item-group>
      </el-submenu>
      </div>
      <!-- <el-menu-item index="4" @click="handstop">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">暂停</span>
          <el-button :plain="true" type="info">暂停</el-button>
        </div>
      </el-menu-item> -->
      <!-- <el-menu-item index="4" @click="handspeed" :disabled="datasting">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">快进</span>
        </div>
      </el-menu-item>
      <el-menu-item index="5" @click="handfastback" :disabled="datasting">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">快退</span>
        </div>
      </el-menu-item> -->
      <!-- <el-menu-item  index="5" @click="handckremote">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">录制</span>
          <el-button :plain="true" type="danger">录制</el-button>
        </div>
      </el-menu-item> -->
      <!-- <el-menu-item  index="6" @click="handreduction">
        <div class="animate__animated animate__backInLeft">
          <span slot="title">录制</span>
          <el-button type="primary" plain>返回原来时间</el-button>
          <el-button :plain="true" type="danger">返回原来时间</el-button>
        </div>
      </el-menu-item> -->
    </el-menu>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'homesles',
  props: {
    addressdata: String
  },
  data () {
    return {
      play: true,
      stop: true,
      getTimes: new Date().getTime().toString(),
      ip: window.location.hostname,
      record: 'record',
      munis: 0,
      munessie: '',
      datasting: false,
      clipsdata: '',
      reductiondata: 'true'
      // clips: 'clips get'
    }
  },
  methods: {
    handEquipmentlist () {
      this.$router.push('/Equipmentlist')
    },
    handEquipmentmiddlle () {
      this.$router.push('/Equipmentmiddlle')
    },
    handclicksapn () {
      this.$router.push('/topandmiddle')
      console.log(this.ip)
    },
    handvideoplayerlist () {
      const that = this
      // axios.get('http://' + this.ip + ':5000/interface', {
      //   params: {
      //     clips: that.clips
      //   }
      // }).then((res) => {
      //   console.log(res.data)
      // })
      // axios.get('http://' + this.ip + ':9993')
      that.$router.push('/videoplayerlist')
    },
    handclick () {
      const that = this
      function getUserAccount () {
        return axios.get('http://' + that.ip + ':5000/command', {
          params: {
            play: that.play
          }
        }).then((res) => {
          if (res || res.data) {
            that.datasting = false
            that.$message({
              message: '你好，设备正在播放',
              type: 'success'
            })
          }
        }).catch((error) => {
          that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
        })
      }
      function getUserPermissions () {
        return axios.get('http://' + that.ip + ':9993', {
          params: {
            getTime: that.getTimes
          }
        })
      }
      axios.all([getUserAccount(), getUserPermissions()])
      this.$router.push('/')
    },
    handstop () {
      const that = this
      function getUser () {
        return axios.get('http://' + that.ip + ':5000/stop', {
          params: {
            stop: that.stop
          }
        }).then((res) => {
          if (res || res.data) {
            that.datasting = false
            that.$message({
              message: '你好，设备已暂停播放',
              type: 'success'
            })
          }
        }).catch((error) => {
          that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
        })
      }
      function getUserPermi () {
        return axios.get('http://' + that.ip + ':9993', {
          params: {
            getTime: that.getTimes
          }
        })
      }
      axios.all([getUser(), getUserPermi()])
      this.$router.push('/')
      that.munis = 0
      that.munessie = ''
    },
    handckremote () {
      const that = this
      axios.get('http://' + that.ip + ':5000/record', {
        params: {
          record: that.record
        }
      }).then((res) => {
        // console.log(res)
        if (res || res.data) {
          that.datasting = true
          that.$message({
            message: '你好，设备正在录制中',
            type: 'success'
          })
        }
      }).catch((error) => {
        that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
      })
      axios.get('http://' + that.ip + ':9993', {
        params: {
          getTime: that.getTimes
        }
      })
    },
    handspeed () {
      const that = this
      const mun = 300
      if (this.munis < 5) {
        that.munis++
        that.munessie = mun * that.munis
        axios.get('http://' + that.ip + ':5000/speed', {
          params: {
            munessie: that.munessie
          }
        })
        axios.get('http://' + that.ip + ':9993', {
          params: {
            getTime: that.getTimes
          }
        })
      }
    },
    handfastback () {
      const that = this
      const mun = -300
      if (this.munis < 5) {
        that.munis++
        that.munessie = mun * that.munis
        axios.get('http://' + that.ip + ':5000/fastback', {
          params: {
            fastback: that.munessie
          }
        })
        axios.get('http://' + that.ip + ':9993', {
          params: {
            getTime: that.getTimes
          }
        })
      }
    },
    handreduction () {
      axios.get('http://' + this.ip + ':5000/reduction', {
        params: {
          reductiondata: this.reductiondata
        }
      }).then((res) => {
        // console.log(res)
        if (res || res.data) {
          this.$message({
            message: '你好，设备返回原来时间成功',
            type: 'success'
          })
        }
      }).catch((error) => {
        this.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
      })
      axios.get('http://' + this.ip + ':9993', {
        params: {
          getTime: this.getTimes
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-menu{
  border: none;
}
.el-menu-item{
  font-size: 20px !important;
}
.el-menu{
  height: 100vh;
}
.el-button--danger.is-plain{
  width: 100%;
  background: #424242;
  border: none;
  color: rgb(255, 255, 255);
}
.el-button--info{
  width: 100%;
  background: #424242;
  border: none;
  color: rgb(255, 255, 255);
}
.el-button--info.is-plain{
  background: #424242;
  color: rgb(255, 255, 255);
}
.el-button--success.is-plain{
  width: 100%;
  background: #424242;
  border: none;
  color: rgb(255, 255, 255);
}
.el-button--primary.is-plain{
  width: 100%;
  background: #424242;
  border: none;
  color: rgb(255, 255, 255);
}
</style>
